<template>
    <div >
        <img :src="imageId" style="width: 100% ;display: flex ;align-content: center">

            <div id="box">
                <div v-for="o in couponsList" :key="o.id" class="item">
                    <el-card >
                        <!--<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">-->
                        <div style="padding: 14px;display:flex;flex-direction: column;align-content: center">
                            <span style="color: orange ;text-align: center;font-size: 50px">{{o.price}}</span>
                            <span style="color: black ;text-align: center;font-size: 20px">{{o.condition}}</span>
                            <div class="bottom clearfix">

                                <el-button type="primary"  round class="button">领取</el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            </div>
    </div>
</template>

<script>
    export default {
        name: "coupons",
        data(){
            return{
                imageId:require("../../assets/text.jpg"),
                couponsList:[
                    {id:"1",price:"-5",condition:"单笔满99元"},
                    {id:"2",price:"-10",condition:"单笔满150元"},
                    {id:"3",price:"-35",condition:"单笔满380元"},
                ]
            }
        }
    }
</script>

<style scoped>


    #box{
        display: flex;
        display: -webkit-flex;
        border: 1px solid #0000FF;
        height: 400px;
        width: 100%;
        align-items:center;
        justify-content:center;
    }
    .item{
        margin-top: 30px;
        margin-left: 100px;
        width: 200px;
        height: 200px;
        border: 1px solid #00C1B3;
    }
    .button{
        margin-top: 30px;
        margin-left: 15px;
    }
</style>